<template>
	<view class="content">
		<view class="title">欢迎来到简蛋</view>
		<view class="tips">
			<view>这是一个简单的小程序</view>
			<view>可以查看图表以及步数</view>
		</view>
		<view class="container">
			<view class="ghost">
				<view class="ghostEyes"></view>
				<view class="ghostDimples"></view>
				<view class="ghostFeet">
					<view class="ghostFoot"></view>
					<view class="ghostFoot"></view>
					<view class="ghostFoot"></view>
					<view class="ghostFoot"></view>
				</view>
			</view>
		</view>
		<view class="shadow"></view>
		<button  class="mini-btn" @click = instroction>使用说明</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			instroction(){
				uni.showModal({
				    content: '可视化: 输入数据名称和数值,\n 点击新增后即可生成对应的柱状图和饼图,点击删除即可删除一条数据\n \n 运动步数: 1.需[小米运动]应用\n  2.用手机号注册账号,记住密码\n  3.在小米运动中点击我的,第三方接入,绑定你要同步的APP',
				    confirmText: "已了解",
					showCancel: false
				});
			}
			}
	}
</script>

<style>
	page{
		height: 100%;
		background-size:100% 100%;
		background-image: url("");

	}
	
	.content{
		
	}
	.title {
		font-weight: bold;
		text-align: center;
		padding: 20px 0px 0 0;
		font-size: 20px;
	}
	.tips {
		text-align: center;
		color: #646464;
		font-size: 18px;
		padding: 10px 30px;
	}
	.container {
		/* 弹性布局 让元素在页面中垂直+水平居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 15px;
	}
.container .ghost {
	/* 相对定位 */
	position: relative;
	width: 50px;
	height: 75px;
	/* 圆角属性 左上角和右上角为圆角 */
	border-radius: 75px 75px 0 0;
	background-color: #fff;
	/* 盒子阴影 inset是内阴影 啥都不加就是默认的外阴影(outset) */
	box-shadow: -17px 0 0 #dbdbdb inset, 0 0 50px #5939db;
	animation: ghost 2s infinite;
}
/* 眼睛 start */
.container .ghost .ghostEyes {
	/* 弹性布局 */
	display: flex;
	/* 让元素平均分配宽度 */
	justify-content: space-around;
	width: 30px;
	padding-top: 25px;
	margin: 0 auto;
}
/* 利用两个伪元素做出卡姿兰大眼睛 */
.container .ghost .ghostEyes::before,
.container .ghost .ghostEyes::after {
	content: "";
	width: 6px;
	height: 8px;
	border-radius: 50%;
	background-color: #00034b;
}
/* 眼睛 end */

/* 腮红 start  */
/* 逻辑跟眼睛一样 */
.container .ghost .ghostDimples {
	display: flex;
	justify-content: space-around;
	width: 46px;
	padding-top: 10px;
	margin: 0 auto;
}
.container .ghost .ghostDimples::before,
.container .ghost .ghostDimples::after {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #ffbeff;
}
/* 腮红 end */

/* 脚 start  */
.container .ghost .ghostFeet {
	/* 这个主要是向让四只脚水平排列  */
	display: flex;
	/* 绝对定位 */
	position: absolute;
	bottom: -13px;
	width: 100%;
}
.container .ghost .ghostFeet .ghostFoot {
	width: 25%;
	height: 26px;
	border-radius: 50%;
	background-color: #fff;
}
/* 设置一下最后一个 让它跟身体的内阴影一样 */
.container .ghost .ghostFeet .ghostFoot:last-child {
	/* 利用背景渐变色实现 to right 是从做到右 */
	background-image: linear-gradient(to right, #fff 55%, #dbdbdb 45%);
}
/* 脚 end */

/* 阴影 start */
.shadow {
	margin-left: 15px;
	margin: 0 auto;
	width: 50px;
	height: 20px;
	margin-top: 20px;
	border-radius: 50%;
	background-color: #000232;
	/* 动画  名称 时长 infinite是无限次播放 */
	animation: shadow 2s infinite;
}
/* 阴影 end */
/* 然后制作漂浮的动画 */
@keyframes ghost {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		/* 2D位移 -15px 是向上走 */
		transform: translateY(-15px);
	}
}
@keyframes shadow {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		/* 缩放 .9比1小一点点 */
		transform: scale(0.9);
	}
}
.mini-btn{
		position:relative;
		display:block;
		margin-left:auto;
		margin-right:auto;
		margin-top: 20px;
		padding-left:14px;
		padding-right:14px;
		box-sizing:border-box;
		font-size:36rpx;
		text-align:center;
		text-decoration:none;
		border-radius:5px;
		-webkit-tap-highlight-color:transparent;
		overflow:hidden;
		color:white;
		background-color:rgba(0,0,0,0.3);
		height: 80rpx;
		line-height: 80rpx;
		width:300rpx;
		cursor: pointer;
		bottom: 10px;
	}
	// 边框样式
	button::after{
		  border: 0;
	}
	// 禁用时样式
	button[disabled] {
		  background-color: #fff;
		  color: #666;
	}
	// 点击时样式
	.mini-btn:hover{
	      box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
	}
</style>
